<?php
		session_start();
?>
<!doctype html>
<html>
<head>
    <meta name=viewport content="user-scalable=no,width=device-width" />
	<script src="../js/plugins/detectmobilebrowser.js"></script>
    
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/jquery.fullPage.css">
    <link rel="stylesheet" type="text/css" href="../css/colorbox.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    
    <script src="../js/plugins/jquery-1.11.0.min.js"></script>
    <script src="../js/plugins/jquery-ui-1.10.4.custom.min.js"></script>

	<script src="../js/plugins/jquery.fullPage.min.js"></script>
	<script src="../js/plugins/jquery.colorbox-min.js"></script>
    

<meta charset="utf-8">
<title>Untitled Document</title>
</head>


<body>
	<!--Menuen-->
    <header>
        <div id="logowrapper"><a href="index.php#firstPage"><img src="../images/Matildemilkshake2.png" alt="logo" name="id" id></a></div>
        <ul id="menu">
            <li data-menuanchor="firstPage"><a href="#firstPage">The Video</a></li>
            <li data-menuanchor="secondPage"><a href="#secondPage">The Game</a></li>
            <li data-menuanchor="3rdPage"><a href="#3rdPage">The Milkshakes</a></li>
        </ul>
	</header>
    <!--Bruger feltet der visser login knap, eller bruger info hvis logget ind.-->
	 <ul id="user">
        <il>
        <?php
		if(!isset($_SESSION['usernavn']) || !isset($_SESSION['password']) and !isset($_GET["besked"])){
		 echo "<a id='login'class='inline' href='#inline_content'>Login</a>";}	
			else if(isset($_SESSION['usernavn'])){
				$array = unserialize(file_get_contents("../data/user.txt"));
				$points = $array['points'];
				
				echo "<p>User: ",$_SESSION['usernavn']," </p>","<p>Points: $points</p>"," ","<a href='logout.php'>Logout</a>";
			  /*  echo "<a href='logout.php'>Logout</a>";
				echo "<p>$points</p>";*/
			}
   		?>
        </li>
    </ul>
<!--side 1-->
<div class="section " id="section0">
	 <div id="front">
        <div id="video">
            <iframe width="640" height="360" src="//www.youtube.com/embed/PS4d0vP7rm0?rel=0" frameborder="0" allowfullscreen></iframe>
        </div>
		<div id="fronttext">
        	<p>Velkommen til Matilde Milkshake’s nye univers</p><p>
Den velkendte Matilde Milkshake har fået nyt design. Det fejrer vi med historien om den lille farmer Ben og malkekoen Matilde. Derudover kan du også her på siden være med i spillet om shakepoints og læse mere om de lækre og cremede Matilde Milkshakes. Hvis du ikke har set det nye TV spot, kan du nemt gøre det lige her.</p>
			<p>GOD FORNØJELSE!</p> 
         </div>      
	</div>	
</div>
<!--side 2, slide 1-->
<div class="section" id="section1">
<div class="slide">
	<div class="intro">
        <h1><img src="../images/shakepointshead.png" alt="shakepoints"></h1>
            <div id="shake">
            <p>
Nu er det tid til at samle shakepoints.</p>
			<p>Her på siden kan du trykke dig til siden og shake milkshaken og få points, men hvis du vil have endnu flere-  skal du gribe din smartphone og gå ind på denne samme side og finde det nærmeste Shakespot.</p>
			<p>Sæt i gang og få muligheden for at vinde fede præmier.</p>
		</div>
	</div>
</div>
<!--side 2, slide 2-->
<div class="slide">
	<div class="intro">
		<?php
            if(!isset($_SESSION['usernavn']) || !isset($_SESSION['password']) and !isset($_GET["besked"])){
            echo "<h1 id='pagelogin'><a class='inline' href='#inline_content'>Login</a></h1>";}	
            else if(isset($_SESSION['usernavn'])){
                    echo '<div id="shakewrapper"><img id="milkshake" src="../images/milksshakebanana.png" alt="milkshake"></div>
                    
            <h1 id="text">Tryk på Milkshaken og ryst dig til shakepoints</h1>';
                }
        ?>
    </div>
</div>

<!--side 3, slide 1-->
<div class="section" id="section2">
    <div class="slide">
		<div class="intro">
			<h1><img src="../images/chocolatetype.png" alt="chocolatet"></h1>
            <div class="milkinfo">
            	<div class="imgwrapper"><img class="milkshakes" src="../images/milksshakechocolate.png" width="609" height="952" alt="chocolate"></div>
				<div class="info">
                    <p>Når du har rystet din Chocolate Milkshake i 30 sekunder kan du nyde den cremede og lækre smag af Chokolade.</p>
                    <p>Den nydes bedst iskold.</p>
                    <p>Velbekomme.</p>
             	</div>
         	</div>   
		</div>
	</div>
    <!--side 3, slide 2-->
	<div class="slide">
		<div class="intro">        
			<h1><img src="../images/bananatype.png" alt="bananat"></h1>
            <div class="milkinfo">
                <div class="imgwrapper"><img class="milkshakes" src="../images/milksshakebanana.png" width="609" height="952" alt="banana"></div>
                <div class="info">
                    <p>Når du har rystet din Banana Milkshake i 30 sekunder kan du nyde den cremede og dejlige smag af banan.</p>
                    <p>Den nydes bedst iskold.</p>
                    <p>Velbekomme.</p>
            	</div>
        	</div>
		</div>
	</div>
    <!--side 3, slide 3-->
    <div class="slide">
		<div class="intro">
			<h1><img src="../images/strawberrytype.png" width="471" height="100" alt="strawberryt"></h1>
            <div class="milkinfo">
                <div class="imgwrapper"><img class="milkshakes" src="../images/milksshakestrawberry.png" width="609" height="953" alt="strawberry"></div>
                <div class="info">
                    <p>Når du har rystet din Strawberry Milkshake i 30 sekunder kan du nyde den cremede og sødmefulde smag af jordbær.</p>
                    <p>Den nydes bedst iskold.</p>
                    <p>Velbekomme.</p>
			</div>
        </div>
	</div>
	</div>
    <!--side 3, slide 4-->
    <div class="slide">
		<div class="intro">
			<h1><img src="../images/vanillatype.png" width="343" height="100" alt="vanillat"></h1>
            <div class="milkinfo">
                <div class="imgwrapper"><img class="milkshakes" src="../images/milksshakesvanilla.png" width="609" height="952" alt="vanilla"></div>
                <div class="info">
                    <p>Når du har rystet din Vanilia Milkshake i 30 sekunder kan du nyde den cremede og skønne smag af Vanilie.</p>
                    <p>Den nydes bedst iskold.</p>
                    <p>Velbekomme.</p>
                </div>
 			</div>
		</div>
	</div>
</div>

<!--loggin form der bliver vist i colorbox-->
<div style='display:none'>
    <div id='inline_content' style='padding:10px; background:#fff;'>
    <!--form til login-->
        <form class="form-horizontale" role="form" action="do_login.php" method="post">
            <div class="form-group">
            <label class="sr-only" for="navn">Brugernavn</label>
            <input type="text" class="form-control" name="usernavn" id="usernavn" placeholder="Skriv dit brugernavn" />
            </div>
            <div class="form-group">
            <label class="sr-only" for="password">Password</label>
            <input type="password" class="form-control" name="password" id="password" placeholder="Skriv dit password" />
            </div>
            <button type="submit" class="btn btn-warning"name="send">Login</button>
            </form>
            <form role="form" action="../index.php">
            <button type="submit" class="btn btn-success">Hovedside</button>
        </form>
    </div>
</div>
<script src="../js/site.js"></script>
</body>
</html>
